<template>
  <h1>Hello Vue3</h1>
  <!--        :modelValue  等价于Vue2的  :value -->
  <!-- @update:modelValue  等价于Vue2的  @input -->
  <Son :modelValue="msg" @update:modelValue="fn" />
  <!-- $event 接收到了触发事件时候传递的形参 -->
  <Son :modelValue="msg" @update:modelValue="msg = $event" />
  <!-- v-model 语法糖 -->
  <Son v-model="msg" />
</template>

<script>
/*
  目标：掌握vue3.0的v-model语法糖原理
  Vue2.0
    <Son :value="msg" @input="msg=$event" />

  Vue3.0
    <Son :modelValue="msg" @update:modelValue="msg=$event" />

*/
import { ref } from 'vue'
import Son from './components/Son17.vue'
export default {
  name: 'App',
  components: { Son },
  setup() {
    const msg = ref(0)
    const fn = number => {
      msg.value = number
    }
    return { msg, fn }
  },
}
</script>

<style></style>
